<template>
    <Popup :value="value" @input="onInput" position="bottom" round>
        <div class="bg-near-white">
            <div
                class="pv6 ph5 bg-white f6 tc gray"
                :class="[descriptionClass]"
                v-if="description"
            >
                {{ description }}
            </div>
            <button
                class="
                    db
                    w-100
                    bg-white
                    bn
                    tc
                    f5
                    lh-solid
                    pv4
                    bt
                    b--light-gray
                    clickable
                "
                v-for="action in actions"
                :key="action.name"
                :style="action.style || ''"
                @click="$emit('select', action)"
            >
                {{ action.name }}
            </button>
            <button
                v-if="cancelText"
                class="db w-100 bg-white bn tc pv4 lh-solid f5 mt4 clickable"
                @click="onInput(false)"
            >
                {{ cancelText }}
            </button>
        </div>
    </Popup>
</template>

<script>
// @ts-check

/** @typedef {{ name: string, subname?: string, style?: Record<string, string> }} Action 动作元素 */
import Popup from '../Popup/index.vue';

export default {
    name: 'EasyActionSheet',

    components: {
        Popup,
    },

    props: {
        value: {
            type: Boolean,
            default: false,
        },

        /** @type {import('vue').PropOptions<Action[]>}  */
        actions: {
            type: Array,
            default() {
                return [];
            },
        },

        /** 取消按钮的文本 */
        cancelText: {
            type: String,
            default: '',
        },

        /** 顶部的描述信息 */
        description: {
            type: String,
            default: '',
        },

        /** 顶部描述的类名 */
        descriptionClass: {
            type: String,
            default: '',
        },
    },

    methods: {
        /**
         * 处理弹窗的显示
         * @param {boolean} e 是否显示弹窗
         */
        onInput(e) {
            this.$emit('input', e);
        },
    },
};
</script>

<style scoped></style>
